<!--
 * @Author: 灰灰
 * @Date: 2021-12-30 11:57:04
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-07 20:08:30
 * @Description: Echart的图表
-->

<template>
  <div class="echart-view"
       :style="{height: height, width:width}">
    <div ref="echartRef"
         :id="chartId"
         class="echart-box"
         :class="className" />
    <img class="chart-img"
         v-if="needImg && imgUrl"
         :src="imgUrl"
         alt="">
  </div>
</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons');
import resize from './mixins/resize'
export default {
  mixins: [resize],
  props: {
    chartId: {
      type: String,
      default: ''
    },
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    option: {
      type: Object,
      require: true
    },
    eventType: {
      type: [String, Array],
      default: ''
    },
    needImg: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      chart: null,
      imgUrl: ''
    }
  },
  watch: {
    option: {
      deep: true,
      handler () {
        this.configOption()
      }
    },
    needImg () {
      this.getImgUrl();
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy () {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    // 获取生成的图片
    getImgUrl () {
      this.imgUrl = this.chart.getDataURL();
      return this.imgUrl;
    },
    initChart () {
      // this.chart = echarts.init(this.$el, 'macarons') //echart 4.多的版本
      // this.chart = echarts.init(document.getElementById(this.chartId));// echart  5.多的版本
      this.chart = echarts.init(this.chartId ? document.getElementById(this.chartId) : this.$refs.echartRef);
      this.configOption();
      var that = this;
      if (!this.eventType) return;
      let events = this.eventType;
      if ((typeof this.eventType == 'string') && this.eventType.constructor == String) {
        events = [this.eventType];
      }
      // 通过事件名称注册多个事件
      events.forEach(item => {
        this.chart.on(item, function (params) {
          that.eventHandler(params);
        })
      })
    },
    configOption () {
      // if (this.option != null) {
      this.chart.setOption(this.option || {}, true)
      // }
    },
    eventHandler (params) {
      const { type } = params;
      if (type === 'click') {
        this.eventClickHandler(params);
      } else if (type === 'mousemove') {
        this.eventMousemoveHandler(params);
      }
    },
    // 点击事件回调
    eventClickHandler (params) {
      const { dataIndex } = params;
      console.log("🚀 ~ file: index.vue ~ line 116 ~ eventClickHandler ~ params", params)
      this.$emit('clickCb', dataIndex)
    },
    //鼠标移入事件
    eventMousemoveHandler (params) {
      const { dataIndex } = params;
      this.$emit('mousemoveCb', dataIndex)
    }
  }
}
</script>

<style scoped>
.echart-box {
  width: 100%;
  height: 100%;
}

.echart-view {
  position: relative;
}

.chart-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>